<!--
 * @Date: 2022-04-17 20:42:12
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-04-24 15:32:23
 * @FilePath: \weibovue\src\views\showAtMeDetail\index.vue
 * @Description: 查看@我的详情
-->
<template>
  <!-- {{ atMeReplyList }} -->
  <div v-if="atMeCount == 0">
    <el-empty description="消息列表空空如也~" />
  </div>

  <div v-else>
    <!-- 回复我的 -->
    <div class="replyMeContainer">
      <h4>
        回复我的({{ atMeReplyList.length }})
        <el-button
          type="text"
          @click="readReply()"
          :disabled="atMeReplyList.length == 0"
          >全部已读</el-button
        >
        <!-- <span >全部已读</span> -->
      </h4>
      <div class="replyMe">
        <div
          class="replyBox"
          @click="readReply(item)"
          v-for="(item, index) in atMeReplyList"
          :key="index"
        >
          <div class="replyleft">
            <img :src="item.user?.avatar" class="avatar" alt="" />
            <div class="userInfo">
              <div class="nickName">{{ item.user?.nickName }}</div>
              <div class="createTime">
                {{
                typeof createTime(item.createdAt!) == "number"
                  ? createTime(item.createdAt!) + "小时前"
                  : createTime(item.createdAt!) }}
              </div>
            </div>
          </div>
          <div v-html="item.content" class="content"></div>
        </div>
      </div>
      <!-- <el-empty description="还没有回复你哦~" v-else /> -->
      <div class="paginationBox">
        <el-pagination
          v-model:currentPage="replyCurrentPage"
          :page-size="5"
          layout="prev, pager, next"
          @current-change="replyCurrentChange"
          :total="replyCount"
          hide-on-single-page
        />
      </div>
    </div>
    <!-- 博客@我的 -->
    <div class="AtMeBlogContainer">
      <h4>
        博客中提到我的({{ atMeBlogList.length }})
        <el-button
          type="text"
          :disabled="atMeBlogList.length == 0"
          @click="showDetailAndRead()"
          >全部已读</el-button
        >
      </h4>
      <div class="replyMe">
        <div
          class="Detailbox"
          @click="showDetailAndRead(item)"
          v-for="(item, index) in atMeBlogList"
          :key="index"
        >
          <div class="Blogleft">
            <img :src="item.user?.avatar" class="avatar" alt="" />
            <div class="userInfo">
              <div class="nickName">{{ item.user?.nickName }}</div>
              <div class="createTime">
                {{
                typeof createTime(item.createdAt!) == "number"
                  ? createTime(item.createdAt!) + "小时前"
                  : createTime(item.createdAt!) }}
              </div>
            </div>
          </div>
          <div v-html="item.content" class="content"></div>
        </div>
        <div class="paginationBox">
          <el-pagination
            v-model:currentPage="replyCurrentPage"
            :page-size="5"
            layout="prev, pager, next"
            @current-change="blogCurrentChange"
            :total="atMeblogCount"
            hide-on-single-page
          />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { computed, getCurrentInstance, ref } from "vue";
import { useStore } from "vuex";
import { atMeReplyItem, atMeBlogItem } from "../../store/types";
import { createTime } from "../../utils/tools";
import usePrevenDefault from "../../hooks/usePrevenDefault";
import { useRouter } from "vue-router";
const store = useStore();
const router = useRouter();
// let atMeReplyList = computed<atMeReplyItem[]>(() => store.state.atMeReplyList);
let atMeReplyList = ref<atMeReplyItem[]>(store.state.atMeReplyList);
let atMeBlogList = ref<atMeBlogItem[]>(store.state.atMeBlogList);
// let atMeBlogList = computed<atMeBlogItem[]>(() => store.state.atMeBlogList);
const { $api } = getCurrentInstance()!.appContext.config.globalProperties!;
let atMeCount = computed(() => store.state.atMeCount);
let BlogCurrentPage = ref<number>(1);
let replyCurrentPage = ref<number>(1);
const replyCount = computed(() => store.state.replyCount);
const atMeblogCount = computed(() => store.state.atMeblogCount);
usePrevenDefault("replyAitem", "noRouter");
//已读回复
const markAsRead = async (
  blogId: number = -1,
  ReplyId: number = -1,
  commentId: number = -1,
) => {
  let res = await $api.user.readReply(blogId, ReplyId, commentId);
};
//已读博客@
const markBlogAsRead = async (blogId?: number) => {
  let res = await $api.user.readBlog(blogId);
  // console.log(res);
};
//点击回复我的
const readReply = (item?: atMeReplyItem) => {
  // console.log(item);
  if (!item) {
    markAsRead();
    //全部已读后跳转首页
    router.push({ name: "Home" });
  } else {
    if (item?.parantId !== null) {
      //回复的是回复
      markAsRead(-1, item?.id, -1);
      router.push({
        name: "blogDetail",
        params: { blogId: item.blogId, userId: -1 },
      });
    } else {
      //回复的是评论
      markAsRead(-1, -1, item?.commentId);
      router.push({
        name: "blogDetail",
        params: { blogId: item.blogId, userId: -1 },
      });
    }
  }
};
//点击博客@我的
const showDetailAndRead = (item?: atMeBlogItem) => {
  if (!item) {
    markBlogAsRead(-1);
    //全部已读后跳转首页
    router.push({ name: "Home" });
  } else {
    markBlogAsRead(+item?.id!);
    router.push({
      name: "blogDetail",
      params: { blogId: item?.id, userId: item?.userId },
    });
  }
};
//获取@我的评论回复列表
const getAtMeReplyList = async (currentPage: number) => {
  let res = await $api.user.reqAtMeReplyList(currentPage);
  if (res.code == 200) {
    // store.commit("updateAtMeReplyList", res.data.replyList);
    atMeReplyList.value = res.data.replyList;
  }
};
//获取@我的博客列表
const getAtMeBlogList = async (currentPage: number) => {
  let res = await $api.user.reqAtMeBlogList(currentPage);
  if (res.code == 200) {
    atMeBlogList.value = res.data.blogList;
  }
};
//博客分页
const blogCurrentChange = (cur: number) => {
  BlogCurrentPage.value = cur;
  getAtMeBlogList(BlogCurrentPage.value);
};
//reply分页
const replyCurrentChange = (cur: number) => {
  replyCurrentPage.value = cur;
  getAtMeReplyList(replyCurrentPage.value);
};
</script>
<style lang="less" scoped>
.replyMeContainer,
.AtMeBlogContainer {
  .paginationBox {
    display: flex;
    justify-content: center;
  }
  h4 {
    width: 100%;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-size: 12px;
      font-weight: 400;
      cursor: pointer;
      &:hover {
        color: #939393;
      }
    }
  }
  .replyMe {
    border-radius: 10px;
    background-color: #fff;
    max-height: 600px;
    overflow-y: auto;
    .Detailbox,
    .replyBox {
      display: flex;
      padding: 20px;
      align-items: center;
      border-radius: 10px;
      &:hover {
        background-color: #f2f2f2;
        cursor: pointer;
      }

      .replyleft,
      .Blogleft {
        display: flex;
        .avatar {
          width: 50px;
          height: 50px;
        }
        .userInfo {
          display: flex;
          flex-direction: column;
          justify-content: center;
          .nickName {
            padding: 2px;
          }
          .createTime {
            font-size: 12px;
            padding: 2px;
            color: #939393;
          }
          margin-right: 15px;
          margin-left: 10px;
        }
      }

      .content {
        flex: 1;
        font-size: 14px;
      }
    }
  }
}
.AtMeBlogContainer {
  margin-top: 20px;
  h4 {
    width: 100%;
    padding: 20px;
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 10px;
  }
}
</style>
